import React, { useRef, useState } from 'react'
import { Divider, message, Tabs } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect, Link } from 'umi'
import { queryCadreList, updateExpeditionDate } from '../service'
import moment from 'moment'
import { promotionTypeList, regularBpmStatusList, isRegularRemindList } from '@/utils/constant'
import CreateForm from './components/CreateForm'
const { TabPane } = Tabs

const TableList = () => {
  const actionRef = useRef()
  const actionRef2 = useRef()
  const [visible, setVisible] = useState(false)
  const [loading, setLoading] = useState(false)
  const [tabIndex, setTabIndex] = useState('0')
  const [record, setRecord] = useState(null)

  const updateDate = (record) => {
    setVisible(true)
    setRecord(record)
  }

  const handleCancel = () => {
    setVisible(false)
    setRecord(null)
  }

  const handleSubmit = (values) => {
    setLoading(true)
    setVisible(false)
  }

  const columns = [
    {
      title: '工号',
      dataIndex: 'code',
      key: 'code',
      fixed: 'left',
      width: 100,
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      fixed: 'left',
      width: 100,
      render: (item, record) => (
        <Link to={`/info/details/${record.oid}`}>{item}</Link>
      ),
    },
    {
      title: '申请日期',
      dataIndex: 'createTime',
      hideInSearch: true,
      render: (text) => {
        return text != '-' ? moment(text).format('YYYY-MM-DD') : ''
      },
      fixed: 'left',
      width: 100,
    },
    {
      title: '变动类型',
      dataIndex: 'regularType',
      hideInSearch: true,
      render: (text) => {
        const res = promotionTypeList.find((item) => item.value === parseInt(text))
        return res ? res.label : text
      },
    },
    {
      title: '所属公司',
      dataIndex: 'orgname',
      key: 'orgname'
    },
    {
      title: '所属部门',
      dataIndex: 'beforeUnitName',
      key: 'beforeUnitName'
    },
    {
      title: '现任岗位',
      dataIndex: 'beforeJobName',
      key: 'beforeJobName',
    },
    {
      title: '现职级',
      dataIndex: 'beforeJobLevel',
      hideInSearch: true,
    },
    {
      title: '申请晋升部门',
      dataIndex: 'unitname',
      hideInSearch: true,
    },
    {
      title: '申请晋升岗位',
      dataIndex: 'jobname',
      hideInSearch: true,
    },
    {
      title: '申请晋升职级',
      dataIndex: 'jobLevel',
      hideInSearch: true,
    },
    {
      title: '申请晋升日期',
      dataIndex: 'applyTime',
      hideInSearch: true,
      render: (text) => {
        return text != '-' ? moment(text).format('YYYY-MM-DD') : ''
      },
    },
    {
      title: '考察期预计结束日期',
      dataIndex: 'regularDay',
      hideInSearch: true,
      render: (text) => {
        return text != '-' ? moment(text).format('YYYY-MM-DD') : ''
      },
    },
    {
      title: '考察到期倒计时',
      dataIndex: 'countdown',
      hideInSearch: true,
      render: (text, record) => {
        let ctm = moment()
        let etm = moment(record.regularDay)
        return etm.diff(ctm, 'days') + '天'
      }
    },
    {
      title: '转正通知',
      dataIndex: 'isRegularRemind',
      hideInSearch: true,
      render: (text) => {
        const res = isRegularRemindList.find((item) => item.value === parseInt(text))
        return res ? res.label : text
      },
    },
    {
      title: '审批状态',
      dataIndex: 'regularBpmStatus',
      hideInSearch: true,
      valueEnum: {
        0: { text: regularBpmStatusList[0].label, status: 'Default' },
        2: { text: regularBpmStatusList[1].label, status: 'Processing' },
        3: { text: regularBpmStatusList[2].label, status: 'Success' },
        4: { text: regularBpmStatusList[3].label, status: 'Default' },
        6: { text: regularBpmStatusList[4].label, status: 'Default' },
      },
    },
  ]

  const completeColumns = [
    {
      title: '工号',
      dataIndex: 'code',
      key: 'code',
      fixed: 'left',
      width: 100,
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      fixed: 'left',
      width: 100,
      render: (item, record) => (
        <Link to={`/info/details/${record.oid}`}>{item}</Link>
      ),
    },
    {
      title: '申请日期',
      dataIndex: 'createTime',
      hideInSearch: true,
      render: (text) => {
        return text != '-' ? moment(text).format('YYYY-MM-DD') : ''
      },
      fixed: 'left',
      width: 100,
    },
    {
      title: '变动类型',
      dataIndex: 'regularType',
      hideInSearch: true,
      render: (text) => {
        const res = promotionTypeList.find((item) => item.value === parseInt(text))
        return res ? res.label : text
      },
    },
    {
      title: '所属公司',
      dataIndex: 'orgname',
      key: 'orgname'
    },
    {
      title: '所属部门',
      dataIndex: 'beforeUnitName',
      key: 'beforeUnitName'
    },
    {
      title: '现任岗位',
      dataIndex: 'beforeJobName',
      key: 'beforeJobName',
    },
    {
      title: '现职级',
      dataIndex: 'beforeJobLevel',
      hideInSearch: true,
    },
    {
      title: '申请晋升部门',
      dataIndex: 'unitname',
      hideInSearch: true,
    },
    {
      title: '申请晋升岗位',
      dataIndex: 'jobname',
      hideInSearch: true,
    },
    {
      title: '申请晋升职级',
      dataIndex: 'jobLevel',
      hideInSearch: true,
    },
    {
      title: '申请晋升日期',
      dataIndex: 'applyTime',
      hideInSearch: true,
      render: (text) => {
        return text != '-' ? moment(text).format('YYYY-MM-DD') : ''
      },
    },
    {
      title: '考察期结束日期',
      dataIndex: 'regularDay',
      hideInSearch: true,
      render: (text) => {
        return text != '-' ? moment(text).format('YYYY-MM-DD') : ''
      },
    },
    {
      title: '审批状态',
      dataIndex: 'regularBpmStatus',
      hideInSearch: true,
      valueEnum: {
        0: { text: regularBpmStatusList[0].label, status: 'Default' },
        2: { text: regularBpmStatusList[1].label, status: 'Processing' },
        3: { text: regularBpmStatusList[2].label, status: 'Success' },
        4: { text: regularBpmStatusList[3].label, status: 'Default' },
        6: { text: regularBpmStatusList[4].label, status: 'Default' },
      },
    },
  ]


  const changeTab = (key) => {
    setTabIndex(key)
    if (key === '0') {
      actionRef.current && actionRef.current.reload()
    } else {
      actionRef2.current && actionRef2.current.reload()
    }
  }

  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="0" onChange={changeTab}>
        <TabPane tab="未完成" key="0">
          <ProTable
            scroll={{ x: '180%' }}
            actionRef={actionRef}
            rowKey="id"
            request={(params) => queryCadreList(params,[2,4])}
            columns={columns}
          />
        </TabPane>
        <TabPane tab="已完成" key="3">
          <ProTable
            scroll={{ x: '180%' }}
            actionRef={actionRef2}
            rowKey="id"
            request={(params) => queryCadreList(params,[3])}
            columns={completeColumns}
          />
        </TabPane>
      </Tabs>
      <CreateForm
        visible={visible}
        record={record}
        loading={loading}
        onCancel={handleCancel}
        onSubmit={handleSubmit}
      />
    </PageHeaderWrapper>
  )
}

export default connect(() => ({}))(TableList)
